<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Page } from '@vben/common-ui';
import { ContentWrap } from '#/components/content-wrap';
import { VxeTable } from '#/adapter/vxe-table';
import { TableToolbar } from '#/components/table-toolbar';
import { Button, Form, Input, DatePicker } from 'ant-design-vue';
import { Plus, Search, RefreshCw } from '@vben/icons';

const loading = ref(false);
const list = ref<any[]>([]);
const total = ref(0);

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  customerName: undefined,
  phone: undefined,
});

const columns = [
  { field: 'customerId', title: '客户ID', width: 140 },
  { field: 'customerName', title: '客户姓名', width: 120 },
  { field: 'phone', title: '电话', width: 130 },
  { field: 'email', title: '邮箱', width: 180 },
  { field: 'weddingDate', title: '婚期', width: 120 },
  { field: 'partnerName', title: '伴侣姓名', width: 120 },
  { field: 'totalOrders', title: '订单总数', width: 100 },
  { field: 'totalSpent', title: '总消费(元)', width: 120 },
  { field: 'createTime', title: '创建时间', width: 180 },
  { title: '操作', width: 150, fixed: 'right', slots: { default: 'action' } },
];

const getList = async () => {
  loading.value = true;
  try {
    // TODO: 调用客户列表API
    list.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

const handleQuery = () => {
  queryParams.pageNo = 1;
  getList();
};

const resetQuery = () => {
  Object.assign(queryParams, {
    pageNo: 1,
    pageSize: 10,
    customerName: undefined,
    phone: undefined,
  });
  getList();
};

onMounted(() => {
  getList();
});
</script>

<template>
  <Page auto-content-height>
    <ContentWrap>
      <Form :model="queryParams" layout="inline" class="mb-4">
        <Form.Item label="客户姓名" name="customerName">
          <Input v-model:value="queryParams.customerName" placeholder="请输入" allowClear />
        </Form.Item>
        <Form.Item label="电话" name="phone">
          <Input v-model:value="queryParams.phone" placeholder="请输入" allowClear />
        </Form.Item>
        <Form.Item>
          <Button type="primary" @click="handleQuery">
            <template #icon><Search /></template>
            搜索
          </Button>
          <Button @click="resetQuery" class="ml-2">
            <template #icon><RefreshCw /></template>
            重置
          </Button>
        </Form.Item>
      </Form>

      <TableToolbar>
        <template #toolbar-buttons>
          <Button type="primary">
            <template #icon><Plus /></template>
            新增客户
          </Button>
        </template>
      </TableToolbar>

      <VxeTable
        :loading="loading"
        :data="list"
        :columns="columns"
        border
        stripe
      >
        <template #action="{ row }">
          <Button type="link" size="small">编辑</Button>
          <Button type="link" size="small">查看订单</Button>
        </template>
      </VxeTable>

      <div class="mt-4 flex justify-end">
        <a-pagination
          v-model:current="queryParams.pageNo"
          v-model:page-size="queryParams.pageSize"
          :total="total"
          show-size-changer
          @change="getList"
        />
      </div>
    </ContentWrap>
  </Page>
</template>

